import React, { Component } from 'react'
import { Table, Button, Icon, Row, Col } from 'antd';
import Request from '../../utils/Request';
import style from './index.scss';

export default class index extends Component {
  state = {
    cart: [],
    menus: [],//存入请求的数据

  }
  // 钩子函数
  componentDidMount() {
    this.getMenusData();
  }
  // 获取菜单列表的数据
  getMenusData = () => {
    Request('/menu.json').then(res => {
      console.log(res);
      if (res && res.status === 200 && res.data) {
        this.setState({
          menus: res.data
        });
      }
    });
  };

  renderMenusTable() {
    // 点击+ 把数量传入
    let data = this.state.menus
    const columns = [
      {
        title: '尺寸',
        dataIndex: 'size',
        key: 'size',
        render: (text, record) => {
          // 解决border的宽度
          if (record.price) {
            return <span>{text}</span>;
          }
          return {
            children: <strong>{text}</strong>,
            props: {
              colSpan: 2,//表头列合并加长
            }
          }
        }
      }, {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
        render: (text, record) => <span>{text}</span>,

      }, {
        title: '加入',
        key: 'action',
        render: (text, record) => {//record指当前整条数据
          const obj = {
            children: (
              <Button
                onClick={() => handleAddMenus(record)}
                className={style['add-btn']}
              >
                <Icon type='plus' />
              </Button>
            ),
            props: []
          }
          if (!record.price) {//判断没有价格的地方button消失
            obj.props.colSpan = 0;
          }
          return obj;
        }

      }
    ];
    //点击加号对解构出来的数据存储state中传入到右边
    const handleAddMenus = record => {
      let { cart } = this.state;
      // 匹配state中和所点击record下的key,如果匹配上就返回下标
      const index = cart.findIndex(item => item.key === record.key);
      // 当index返回的下标>0 的表示右边已存在该商品,因为右边是时时取state下的cart值,index没有的时候是-1
      index >= 0 ? cart.splice(index, 1, {
        ...cart[index],
        count: cart[index].count + 1
      }) : (cart = [
        ...cart,
        {
          ...record,
          count: 1
        }
      ])
      this.setState({
        cart,
      })
      // console.log(record)
    }
    let dataSource = [];
    for (const key in data) {
      // console.log(data[item])
      let item = data[key]
      dataSource.push({
        key: item.name,
        size: item.name,
        name: item.name
      })
      // 第二层
      item.options.forEach((ele, index) => {
        dataSource.push({
          ...ele,
          name: item.name,
          key: key + '-' + index
        })
      })
    }
    return (
      //  pagination={false} 隐藏底部的页数
      <Table className="menus-table" pagination={false} dataSource={dataSource} columns={columns} />
    )
  }
  renderCartTable() {//右边模块
    const columns = [
      {
        key: "count",
        title: "数量 ",
        dataIndex: "count",//列数据在数据项中对应的 key，
        render: (text, recore) => (
          <span>
            <Button className={style['cart-btn']} onClick={() => handleDecrease(recore)}>-</Button>
            <span>{recore.count}</span>
            <Button className={style['cart-btn']} onClick={() => handleInDecrease(recore)}>+</Button>
          </span>
        )
      },
      {
        key: "name",
        title: "菜单 ",
        dataIndex: "name",//列数据在数据项中对应的 key，
      },
      {
        key: "price",
        title: "价格 ",
        dataIndex: "price",//列数据在数据项中对应的 key，
      }
    ]
    const handleDecrease = (record) => {//点击减减
      // cart 数据
      let { cart } = this.state;
      // 获取当前点击的数据的下标
      const index = cart.findIndex(item => item.key === record.key);
      // 当前点击的数据对象
      const current = cart[index];
      // console.log(current);
      // 当前数量小于等于1时, 购物车的商品移除掉 否则商品数量减1
      if (current.count <= 1) {
        cart.splice(index, 1);
      } else {
        cart.splice(index, 1, {
          ...current,
          count: current.count - 1
        });
      }
      // 更新状态
      this.setState({
        cart
      });
    }
    const handleInDecrease = (record) => {//点击加加
      // car数据 
      let { cart } = this.state;
      // 匹配key并获取当前点击下标
      const index = cart.findIndex(item => item.key === record.key)
      // 当前数据
      const current = cart[index];
      // 当前数量加1
      cart.splice(index, 1, {
        ...current,
        count: current.count + 1
      })
      this.setState({
        cart,
      })
    }
    return (
      /**
       * /  pagination={false} 隐藏底部的页数 ,右边展示
       * dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
       *  */
      <Table
        className="menus-table cart"
        pagination={false}
        dataSource={this.state.cart}
        columns={columns}
        // locale默认文案设置，目前包括排序、过滤、空数据文案
        locale={{
          emptyText: "购物车暂无商品"
        }}
      />
    )
  }
  render() {
    const totalPrice = this.state.cart.reduce((total, item) => {
      return total += item.price * item.count;
    }, 0)

    return (
      <Row>
        <Col sm={24} md={16}>
          {this.renderMenusTable()}
        </Col>
        <Col sm={24} md={8}>
          {this.renderCartTable()}
          <p className={style['total-price']}>总价:{totalPrice}</p>
          <Button type="primary" className={style['submit-btn']}>
            提交
          </Button>
        </Col>
      </Row>
    )
  }
}
